<template>
  <view class="my-rights-score">
    <view class="top-bg">
      <view class="custom-nav wx-nav">
        <up-icon name="arrow-left" color="#fff" @tap="backNav" />
        <text class="title"> 我的权益分 </text>
        <text class="score-rules" @tap="toScoreRules"> 权益分规则 </text>
      </view>
    </view>
    <view class="score-card">
      <view class="left">
        <text class="title"> 账户权益分余额 </text>
        <view class="score">
          <text class="num">
            {{ scoreInfo.totalIntegral }}
          </text>
          权益分
        </view>
      </view>
      <view class="right">
        <view class="btn" @tap="get1688NavParams">
          去使用
          <!--  -->
        </view>
      </view>
    </view>
    <view class="score-info">
      <view class="score-info__title">
        <text class="title"> 权益分收入明细 </text>
        <view class="desc">
          本月已获取
          <text class="spec">
            {{ scoreInfo.getIntegral }}
          </text>
          权益分 已消耗
          <text class="spec">{{ Math.abs(scoreInfo.consumeIntegral) }}</text>
          权益分
        </view>
      </view>
      <view class="score-info__list">
        <up-tabs
          :list="scoreInfoTabs"
          :current="curStatusTab"
          :line-width="rpx2px(72)"
          :lineColor="'#00B588'"
          :line-height="rpx2px(9)"
          :itemStyle="activityStatusTabStyle"
          @change="handleStatusTabChange"
          :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }"
        />
        <up-list
          v-if="scoreInfoList.length > 0"
          :height="rpx2px(1002)"
          @scrolltolower="scrollToLower"
        >
          <up-list-item v-for="(item, index) in scoreInfoList" :key="index">
            <view class="list-item">
              <view class="left">
                <text class="title">
                  {{ item.changeType }}
                </text>
                <text class="time">
                  {{ item.createTime }}
                </text>
              </view>
              <view class="right">
                <text
                  :class="[
                    'score',
                    item.changeValue > 0 ? 'get-score' : 'use-score',
                  ]"
                >
                  {{
                    item.changeValue > 0
                      ? `+${item.changeValue}`
                      : item.changeValue
                  }}
                </text>
              </view>
            </view>
          </up-list-item>
        </up-list>
        <none-data v-else />
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, watch } from "vue";
import { rpx2px } from "@/utils/utils";
import { onShow } from "@dcloudio/uni-app";
import { get1688NavParamsApi } from "@/api/shopping";
import { getUserScoreApi, getUserScoreInfoListApi } from "@/api/task";
import { customNav } from "@/utils/customNav";

// tab栏数据
const scoreInfoTabs = ref([
  { name: "全部" },
  { name: "已获得" },
  { name: "已消耗" },
]);
// 当前选择tab
const curStatusTab = ref(0);
const activityStatusTabStyle = {
  flex: 1,
  fontFamily: "ali-p",
  fontSize: "31rpx",
  height: "80rpx!important",
};

const scoreInfoList = ref([]);
const handleStatusTabChange = (tab) => {
  params.value.page = 1;
  curStatusTab.value = tab.index;
  scoreInfoList.value = [];
  switch (tab.name) {
    case "全部":
      params.value.type = 2;
      break;
    case "已获得":
      params.value.type = 0;
      break;
    case "已消耗":
      params.value.type = 1;
      break;
  }
};
watch(curStatusTab, () => {
  getUserScoreInfoList();
});
const get1688NavParams = async () => {
  const res = await get1688NavParamsApi();
  const { code, data } = res;
  if (code === 200) {
    console.log("测试半瓶跳转参数code", data.code);
     // #ifdef H5 || APP-PLUS
     openMiniProgram(data.code, data.phone);
    // #endif

    // #ifdef  MP-WEIXIN
    // uni.openEmbeddedMiniProgram({
    uni.navigateToMiniProgram({
      appId: "wx90337e70657a6d17",
      path: "pages/index/index",
      envVersion: "release",
      extraData: {
        authCode: data.code,
        mobile: data.phone,
      },
    });
    // #endif
  }
};
function openMiniProgram(code, phone) {
  let data = {
    targetId: "gh_f19b19cb63b7",
    paramsStr: `pages/index/index?mobile=${phone}&authCode=${code}`,
    // paramsStr: `pages/index/index`,
    type: 0,
  };
  window.mobile.jsCallOpenSmallProgram(JSON.stringify(data));

  // // 这里的参数需要根据实际的小程序码和参数来设置
  // const url = "wx90337e70657a6d17"; // 小程序的码，需要在微信公众平台获取
  // const param = "pages/index/index"; // 需要传递给小程序的参数，如path等

  // // 调用微信提供的API
  // wx.miniProgram.navigateTo({
  //   url: `${url}?query=` + param, // 这里的URL需要根据实际传递参数调整
  // });
}
const scrollToLower = () => {
  if (scoreInfoList.value.length > listTotal.value) {
    params.value.page++;
    getUserScoreInfoList();
  }
};

const toScoreRules = () => {
  customNav("score-rules");
};

const backNav = () => {
  customNav("index");
};

const scoreInfo = ref({
  totalIntegral: 0,
  getIntegral: 0,
  consumeIntegral: 0,
});
const getUserScoreInfo = async () => {
  const res = await getUserScoreApi();
  const { code, data } = res;
  if (code === 200) {
    scoreInfo.value = data;
  }
};

const params = ref({
  page: 1,
  size: 10,
  type: 2,
});
const listTotal = ref(0);
const getUserScoreInfoList = async () => {
  await uni.showLoading({
    title: "加载中...",
  });
  const res = await getUserScoreInfoListApi(params.value);
  const { code, data } = res;
  if (code === 200) {
    uni.hideLoading();
    scoreInfoList.value = data.records;
    listTotal.value = data.total;
    console.log(data);
  }
};
onShow(() => {
  getUserScoreInfo();
  getUserScoreInfoList();
});
</script>
<style lang="less" scoped>
.my-rights-score {
  .top-bg {
    position: relative;
    width: 100vw;
    height: 486rpx;
    background: @my-rights-score-bg;
    background-size: 100% 100%;

    .custom-nav {
      display: flex;
      justify-content: space-between;
      font-family: "ali-p";
      color: @color-origin-white;
      padding: 60rpx 31rpx 0 42rpx;
      box-sizing: border-box;
      font-size: 31rpx;
    }
    /* #ifdef MP-WEIXIN */
    .wx-nav {
      padding-top: 200rpx;
    }
    /* #endif */
  }

  .score-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 716rpx;
    padding: 39rpx 48rpx 46rpx 20rpx;
    margin: -188rpx auto 0;
    box-sizing: border-box;
    background-color: @color-origin-white;
    box-shadow: 0rpx 5rpx 13rpx 1rpx rgba(0, 0, 0, 0.05);
    border-radius: 33rpx;
    font-family: "ali-p";

    .left {
      display: flex;
      flex-direction: column;

      .title {
        font-size: 23rpx;
        font-weight: 500;
        color: @color-grey-text;
      }

      .score {
        margin-top: 16rpx;
        font-weight: 500;
        font-size: 31rpx;

        .num {
          // font-family: borda;
          // font-weight: 600;
          font-size: 65rpx;
        }
      }
    }

    .right {
      .btn {
        width: 157rpx;
        height: 44rpx;
        line-height: 44rpx;
        text-align: center;
        border-radius: 22rpx;
        background-color: @color-blue;
        color: @color-origin-white;
        font-size: 23rpx;
      }
    }
  }

  .score-info {
    margin-top: 33rpx;

    &__title {
      display: flex;
      justify-content: space-between;
      padding: 0 15rpx 0 38rpx;
      box-sizing: border-box;
      font-family: "ali-p";

      .title {
        font-weight: 600;
        font-size: 31rpx;
      }

      .desc {
        color: @color-light-grey-text;
        font-size: 23rpx;
        white-space: nowrap;

        .spec {
          color: @color-blue-text;
        }
      }
    }

    &__list {
      margin-top: 24rpx;

      :deep(.u-tabs) {
        padding-left: 15rpx;
      }

      :deep(.u-list) {
        margin-top: 13rpx;
        padding: 31rpx 34rpx;
        box-sizing: border-box;
        background-color: @color-origin-white;
      }

      :deep(.list-item) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        border-bottom: 1px solid @color-light-grey-border;
        margin-bottom: 52rpx;
        font-family: "ali-p";

        .left {
          display: flex;
          flex-direction: column;

          .title {
            font-size: 31rpx;
          }

          .time {
            font-size: 23rpx;
            color: @color-grey-text;
          }
        }

        .right {
          font-size: 31rpx;

          .get-score {
            color: @color-green-text;
          }

          .use-score {
            color: @color-orange-text;
          }
        }
      }
    }
  }
}

</style>
